<%@ page language="java" contentType="text/html; charset=US-ASCII"
    pageEncoding="US-ASCII"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<br>

<div class="row">
	
	<div class="col-lg-3">
		<div class="row">
			<div class="panel panel-primary" id="dpServicesList" style="height:100%;">
				<div class="panel-heading  clearfix">
					<i class="fa fa-list-alt"></i> <a style="color:white" data-toggle="collapse" href="#dpServicesListCollapse">Service List</a>
					 <div class="pull-right">
					 	<div class="btn-group">
	                       <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
	                           Regions
	                           <span class="caret"></span>
	                       </button>
	                       <ul class="dropdown-menu pull-right" role="menu" id="regionSelectList">
	                     	          
	                       </ul>
	                   </div>
	                   <div class="btn-group">
	                       <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
	                           Actions
	                           <span class="caret"></span>
	                       </button>
	                       <ul class="dropdown-menu pull-right" role="menu">
	                     	   <li><a  id="addService"><i class="fa fa-plus fa-fw"></i>Add</a></li>     
	                     	    <li><a  id="deleteService"><i class="fa fa-times fa-fw"></i>Delete</a></li> 
	                     	      
	                       </ul>
	                   </div>
	                   
	               </div>
				</div>
				<div id="dpServicesListCollapse" class="panel-collapse collapsein">
					 <div class="panel-body">
					 	<table class="table table-hover table-condensed" style="border: 0px" id="dpServicesListTable">
							<tbody id="dpServicesListTableBody">
							</tbody>
						</table>
					 </div>
				</div>
			</div>
		</div>
	</div>
	<div class="col-lg-9" style="height:100%;">
			<div id="dpTesting-alert-container"></div>
			<div class="panel panel-primary">
				<div class="panel-heading">
					 <i class="fa fa-pencil-square-o"></i> <a style="color:white" data-toggle="collapse" href="#dpServiceDetailsCollapse">Service Details</a>  
					 <div class="pull-right">
						  <div class="btn-group">
		                       <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
		                           Actions
		                           <span class="caret"></span>
		                       </button>
		                       <ul class="dropdown-menu pull-right" role="menu">
		                     	   <li><a  id="saveService"><i class="fa fa-floppy-o fa-fw"></i>Save</a></li>   
		                     	    <li><a  id="resetService"><i class="fa fa-eraser fa-fw"></i>Reset</a></li>   
		                     	   <li><a  id="executeSevice"><i class="fa fa-play fa-fw"></i>Run</a></li>   
		                     	  
		                       </ul>
		                   </div>
	                   </div>
				</div>
				<div id="dpServiceDetailsCollapse" class="panel-collapse collapsein">
				<div class="panel-body">
					<form class="form-horizontal" role="form" id="dpServiceDetailsForm">	

							<div class="form-group">
								  <label for="serviceName" class="col-sm-2 control-label">Service Name:</label>
			                     
			                       <div class="col-sm-4">
			                       		 <input id="id"  type="hidden" class="form-control"/>
			                      		 <input id="serviceName" type="text"  class="form-control input-sm"  placeholder="Enter Service Name" />
			                       </div>
			                       <label for="regionName" class="col-sm-2 control-label">Region Name:</label>
			                       <div class="col-sm-4">
			                          <select id="regionName"  class="form-control input-sm">
				                       	
				                       	<option>LOCAL</option>
				                       	<option>DEV</option>
				                       	<option>TEST</option>
				                       	<option>SIT</option>
				                       	<option>QA</option>
				                       	<option>PROD</option>
					                  </select>
				                  </div>
		                        
	                   		 </div>
	                   		 <div class="form-group">
		                   		 	   <label for="type" class="col-sm-2 control-label">Type:</label>
				                     
				                       <div class="col-sm-4">
				                       		<select id="type"  class="form-control input-sm">
					           	            	<option>HTTP</option>
					            	           	<option>SOAP</option>
						             	     </select>
				                       </div>
				                       <label for="httpMethod" class="col-sm-2 control-label">Http Method:</label>
				                       <div class="col-sm-4">
				                          	<select id="httpMethod"  class="form-control input-sm">
					                       
					                       	<option>GET</option>
					                       	<option>POST</option>
					                       	<option>DELETE</option>
						                  </select>
					                  </div>
	                   		 </div>
	                   		 <div class="form-group">
		                   		 	   <label for="url" class="col-sm-2 control-label">URL:</label>
				                     
				                       <div class="col-sm-10">
				                       		<input id="url" type="text"  class="form-control input-sm"  placeholder="Enter URL" />
				                       </div>
				                       
	                   		 </div>
	                   		 <div class="form-group">
		                   		 	   <label for="username" class="col-sm-2 control-label">Username:</label>
				                     
				                       <div class="col-sm-4">
				                       		<input id="username" type="text"  class="form-control input-sm"  placeholder="Enter username" />
				                       </div>
				                       <label for="password" class="col-sm-2 control-label">Password:</label>
				                       <div class="col-sm-4">
				                          	<input id="password" type="password"  class="form-control input-sm"   />
					                  </div>
	                   		 </div>
	                   		 <div class="form-group">
		                   		 	   <label for="contentType" class="col-sm-2 control-label">ContentType:</label>
				                       <div class="col-sm-4">
				                       		<input id="contentType" type="text"  class="form-control input-sm"  />
				                       </div>
				                       <label for="soapAction" class="col-sm-2 control-label">SOAPAction:</label>
				                       <div class="col-sm-4">
				                       		<input id="soapAction" type="text"  class="form-control input-sm"  />
				                       </div>
				                       
	                   		 </div>
	                   		 
							<div class="form-group">
										<label for="httpHeaders" class="col-sm-2 control-label">Http Headers:</label>
				                       <div class="col-sm-10">
				                       		<textarea id="httpHeaders" class="form-control input-sm"  placeholder="" rows="5" />
				                       		<p class="help-block">Name/Value Pair. Separated with comma(,). e.g, Accept=text/xml,"</p>
					                  </div>
		             		</div>
		             		<div class="form-group">
		                   		 	   <label for="comments" class="col-sm-2 control-label">Comments:</label>
				                     
				                       <div class="col-sm-10">
				                       		<input id="comments" type="text"  class="form-control input-sm"  placeholder="Enter Comments" />
				                       </div>
				                       
	                   		 </div>
			    	</form>
				</div>
			</div>
			</div>
			<div class="panel panel-primary">
				<div class="panel-heading">
					 <i class="glyphicon glyphicon-send"></i> <a style="color:white" data-toggle="collapse" href="#dpServiceDetailsFormPayload">Payload</a>  
				</div>
				<div id="dpServiceDetailsFormPayload" class="panel-collapse collapse">
					<div class="panel-body">
						<form class="form" role="form">	
							<div class="form-group">
		                   		 	  <div class="col-sm-12">
				                       		<textarea id="payload" class="form-control input-sm"  placeholder="Enter Payload" rows="20" />
				                       </div>
				                       
	                   		 </div>
						</form>
					</div>
				</div>
			</div>
			<div class="panel panel-primary">
				<div class="panel-heading">
					 <i class="glyphicon glyphicon-th"></i> <a style="color:white" data-toggle="collapse" href="#dpServiceDetailsFormOutput">Output</a>  
				</div>
				<div id="dpServiceDetailsFormOutput" class="panel-collapse collapse">
					<div class="panel-body">
						<div class="well" id="serviceOutput">
							<textarea id="serviceOutputText" class="form-control input-sm" rows="20" />
						</div>
					</div>
				</div>
			</div>
			
	</div>
</div>
<script>
	$(document).ready(function() {
	 var regionNames= uft.getDpServiceUniqueRegions();
	 var allServices=[];
	 $("#regionSelectList").empty();
	 if( !jQuery.isEmptyObject(regionNames)){
		jQuery.each( regionNames, function( i, val ) {
			var li= $('<li>' , {
						html : [ 
						         $('<a>', {
						        	 text: val
						         }).click(function(){
						         	updateServiceTable($(this).text());
						         })
						         
						       ]
					})
			$("#regionSelectList").append(li)	
		})
	}
	$("#dpServicesListTable tbody").on('click','tr', function () { 
		
		if(!$(this).hasClass('selected')){ 
			$("#dpServicesListTable tbody tr").removeClass('selected');
			$(this).addClass('selected');
			var serviceId =$(this).find('td:first').text();
			var exist=$.grep(allServices, function(obj) {
				return obj.id == serviceId;
			});
			if( !jQuery.isEmptyObject(exist)){
				var serviceObj=exist[0]
				serviceObj.serviceOutputText=" "
				dwr.util.setValues(serviceObj);
			}
		}
	})
	$("#saveService").click(function(){	
		var dpServiceObj =  uft.getEmptyDpService()
		dwr.util.getValues(dpServiceObj);
		uft.saveOrUpdateDpService(dpServiceObj,"dpTesting-alert-container");
		
	})
	$("#addService").click(function(){	
		resetServiceDetails()
	
	})
	$("#resetService").click(function(){	
		resetServiceDetails()
		uft.generateAlert("Form Reset", "dpTesting-alert-container")
	})
	$("#executeSevice").click(function(){	
		$("#dpServiceDetailsFormOutput").collapse('show')
		$("#serviceOutput").focus();
		
		if( !jQuery.isEmptyObject($("#id").val())){
			dpController.executeDPService(parseInt($("#id").val()),{
			 async: false,
			callback:function(data){
				
				$("#serviceOutputText").val(data.RESPONSE);
			},
			preHook:function(){
				uft.showWaitDialog("Please Wait..", "Running the Service");
			},
			postHook:function(){
				uft.hideWaitDailog();
			}
		});
		}
		
	})
	
	function resetServiceDetails(){
		var dpServiceObj =  uft.getEmptyDpService()
		dpServiceObj.serviceOutputText=" "
		dwr.util.setValues(dpServiceObj);	
		
	}
	
	function updateServiceTable(regionName){
		allServices= uft.getDpGetAllServiceByRegion(regionName);
		if( !jQuery.isEmptyObject(allServices)){
			dwr.util.removeAllRows("dpServicesListTableBody");
			dwr.util.addRows( "dpServicesListTableBody",allServices,[function(data) { return data.id; },function(data){return data.serviceName}],{ 
			cellCreator:function(options) {
				 var row = document.createElement("td");
				 var cellNum=options.cellNum;
				 if( cellNum == 0){
					 row.style.display="none"
				 }
				 return row;
			},
			escapeHtml:false });
			
		}
	}
	})
</script>
